import { search } from '@/services/ant-design-pro/brainSpace';
import { SpaceType } from '@/types/spaceType';
import { LeftOutlined } from '@ant-design/icons';
import { Empty, message, Pagination } from 'antd';
import React, { useEffect, useState } from 'react';
import LongDocItem from '../LongDocItem';
import ShortDocItem from '../ShortDocItem';
import './index.less';

const CommonList: React.FC<any> = (props: any) => {
  const { query, expendBot, close } = props;
  const [totalCount, setTotalCount] = useState<number>(0);
  const [dataList, setDataList] = useState<any[]>([]); // 文档列表

  const isShortItemType = (type: SpaceType) => {
    return [
      SpaceType.SPACETCOLLECTION,
      SpaceType.SPACETFAVORITE,
      SpaceType.SPACETSREFERENCE,
    ].includes(type);
  };

  const showTagItemType = (type: SpaceType) => {
    return [SpaceType.SPACETSENTENCES, SpaceType.SPACETSPEECH].includes(type);
  };

  const showTitleItemType = (type: SpaceType) => {
    return [SpaceType.SPACETSPEECH].includes(type);
  };

  const getSearchList = async (page: number, per_page: number) => {
    const res = await search({ page, per_page, ...query });
    if (res.code === 0) {
      const { total_count, cognitions } = res.data;
      setTotalCount(total_count);
      cognitions.forEach((v: any) => {
        if (showTagItemType(query.cognition_type)) {
          v.showTag = true;
        }
        if (showTitleItemType(query.cognition_type)) {
          v.showTitle = true;
        }
      });
      setDataList(cognitions);
    } else {
      message.error(res.msg);
    }
  };

  //分页默认值，
  const [pageOption, setPageOption] = useState({
    page: 1, //当前页为1
    per_page: 15, //一页15行
  });

  //当翻页时，改变当前为第current页，current和size这两参数是onChange API自带的，会帮你算出来你现在在第几页，这一页有多少行数据。
  const paginationChange = async (current: number, size: number) => {
    //前面用到useState
    setPageOption({
      page: current, //当前所在页面
      per_page: size, //一页有几行
    });

    getSearchList(current, size);
  };

  const closeSelf = () => {
    setPageOption({
      page: 1, //当前所在页面
      per_page: 15, //一页有几行
    });
    setDataList([]);
    setTotalCount(0);
    close();
  };

  useEffect(() => {
    setPageOption({
      page: 1, //当前所在页面
      per_page: 15, //一页有几行
    });
    setDataList([]);
    setTotalCount(0);
    getSearchList(1, 15);
  }, [query]);

  return (
    <div className="common-warp">
      <div
        className="title"
        onClick={(e) => {
          e.stopPropagation();
          closeSelf();
        }}
      >
        <LeftOutlined /> {query.name}
      </div>
      <div className={`item-card-box ${expendBot ? '' : 'show-margin-right'}`}>
        {dataList.length > 0 &&
          dataList.map((item: any) => {
            return isShortItemType(query.cognition_type) ? (
              <ShortDocItem key={item.id} item={item}></ShortDocItem>
            ) : (
              <LongDocItem key={item.id} item={item} />
            );
          })}
        {!dataList.length && <Empty className="empty" image={Empty.PRESENTED_IMAGE_SIMPLE} />}
      </div>

      {dataList.length > 0 && (
        <div className="pagination flex-jcon-end m-t-10">
          <Pagination
            current={pageOption.page}
            defaultCurrent={1}
            pageSize={pageOption.per_page}
            total={totalCount}
            showSizeChanger={false}
            onChange={paginationChange}
          />
        </div>
      )}
    </div>
  );
};

export default CommonList;
